<template>
  
  <div>

  <headerView ref="header" systemName="赵县中医院OA系统" />

  <div class="body background-carousel" id="body" v-if=" pageFlag"
    :style="{ backgroundImage: `url(${images[currentIndex]})` }">
    <div class="carousel">
      <div class="carousel-controls">
        <button class="prevSlide" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave" @click="prevSlide"><el-icon>
            <ArrowLeftBold />
          </el-icon></button>
        <button class="nextSlide" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave" @click="nextSlide"><el-icon>
            <ArrowRightBold />
          </el-icon></button>
      </div>
      <div class="content">
        <!-- <transition name="fade-slide" mode="out-in"> -->
          <component :is="currentComponent" class="content-box" />
        <!-- </transition> -->
      </div>
      <div class="carousel-indicators" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave">
        <div v-for="(image, index) in images" :key="index" class="indicator" :class="{ active: currentIndex === index }"
          @click="goToSlide(index)"></div>
      </div>
    </div>
    <indexNormalTeacher ref="indexNormalTeacher"  />


    <!-- <indexNormalTeacher ref="indexNormalTeacher" v-if="list.length <= 6 && pageFlag"  /> -->
    
    <!-- <indexCardListView :topList="topList" v-if="list.length > 6 && pageFlag" /> -->
    <!-- <div class="footer" v-if="list.length > 6 && pageFlag" >
      <div class="manage_box">
        <indexManageView :studentList="studentList" :teacherList="teacherList" />
      </div>
      <div class="article_box">
        <indexActiveListView />
      </div>
    </div> -->
  </div>
</div>
</template>
<script>
import { httpService } from "@/utils/httpService";
import { Calendar, Search, ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
import indexNormalTeacher from "@/components/indexView/indexNormalTeacher.vue";
import indexCardListView from "@/components/indexView/indexCardListView.vue";
import indexManageView from "@/components/indexView/indexManageView.vue";
import indexActiveListView from "@/components/indexView/indexActiveListView.vue";
import ContentBox1 from "@/components/indexView/ContentBox1.vue";
import ContentBox2 from "@/components/indexView/ContentBox2.vue";
import ContentBox3 from "@/components/indexView/ContentBox3.vue";
import headerView from "@/components/header.vue";

export default {
  name: "newIndex",
  components: {
    indexNormalTeacher,
    indexCardListView,
    indexManageView,
    indexActiveListView,
    ArrowLeftBold, ArrowRightBold, ContentBox1, ContentBox2, ContentBox3,headerView
  },
  data() {
    return {
      list: [],
      topList: [],
      studentList: [],
      teacherList: [],
      appNames: ['我的工资', '人员考勤系统', '校园网盘', '问卷管理系统', '基础信息系统'],

      images: [
        require('../assets/newIndex_banner1.png'),
        require('../assets/newIndex_banner2.png'),
        require('../assets/newIndex_banner3.png'),
      ],
      currentIndex: 0,
      timer: null,
      pageFlag: false,

    };
  },
  computed: {
    currentComponent() {
      if (this.currentIndex === 0) return 'ContentBox1';
      if (this.currentIndex === 1) return 'ContentBox2';
      return 'ContentBox3';
    },
  },
  created() {
    // 每隔 3 秒切换组件
    setInterval(this.nextComponent, 3000);
  },
  mounted() {
    this.getListApp()
    this.startAutoPlay();
  },
  beforeDestroy() {
    this.stopAutoPlay();
  },
  methods: {
    nextSlide() {
      this.currentIndex = (this.currentIndex + 1) % this.images.length;
    },
    prevSlide() {
      this.currentIndex =
        (this.currentIndex - 1 + this.images.length) % this.images.length;
    },
    goToSlide(index) {
      this.currentIndex = index;
    },
    startAutoPlay() {
      this.timer = setInterval(this.nextSlide, 30000);
    },
    stopAutoPlay() {
      clearInterval(this.timer);
    },
    onMouseEnter(index) {
      this.stopAutoPlay()
    },
    onMouseLeave(index) {
      this.startAutoPlay()
    },

    getListApp() {
      httpService("/javaApi/getAllApp", "", "get").then((data) => {
        this.pageFlag = true
        this.list = data;
          this.$nextTick(() => {
            this.$refs.indexNormalTeacher.list = data
          })
      //   if (data && data.length <= 6) {
      //     this.list = data;
      //     this.$nextTick(() => {
      //       this.$refs.indexNormalTeacher.list = data
      //     })
      //   } else {
      //     this.list = data;
      //     let arr = [], arr1 = []
      //     arr = data.filter(item => this.appNames.includes(item.appName))
      //     arr1 = data.filter(item => !this.appNames.includes(item.appName))
      //     this.topList = arr
      //     let otherList = arr1
      //     this.studentList = otherList.filter(item => item.classification == 2)
      //     this.teacherList = otherList.filter(item => item.classification == 1)
      //   }
      });
    },
  },
};
</script>
<style scoped>
#body {
  background-repeat: no-repeat;

  background-size: 100%;
  transition: background-image 1s ease-in-out !important;
  background-color: #e8f2ff;
}

.body {
  width: 100%;
  min-height: 100vh;

}

.footer {
  width: 75%;
  margin: 22px auto 0;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}

.manage_box {
  width: 79.75%;
  background-color: #ffffff;
}

.article_box {
  width: 19%;
  background-color: rgb(255, 255, 255);
}
</style>

<style scoped>
.carousel {
  position: relative;
  width: 100%;
  height: 32vh;
  /* 根据需求调整 */
  overflow: hidden;
}

.carousel-slide {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}



/* 指示器容器，固定在页面底部 */
.carousel-indicators {
  position: absolute;
  /* position: fixed; */
  /* top: 27%;  */
  left: 50%;
  bottom: 13%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  z-index: 9999;
  /* 保证在页面最高层 */
}

/* 指示器样式 */
.indicator {
  width: 23px;
  height: 8px;
  margin: 0 5px;
  background-color: #ccc;
  border-radius: 4px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.indicator.active {
  width: 40px;
  background-color: #007bff;
  border-radius: 20px;
}


.carousel-controls {
  width: 75vw;
  height: 31vh;
  /* background-color: brown; */
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between
}



.prevSlide,
.nextSlide {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #9fb0bb;
  border: none;
  color: #fff;
  font-size: 22px;
  outline: none;
  cursor: pointer;
}

.prevSlide .el-icon,
.nextSlide .el-icon {
  margin-top: 3px;
  font-weight: bold;
}


.content {
  position: absolute;
  top: 20%;
  left: 18%;

}



/* 定义过渡的初始和结束状态 */
.fade-slide-enter-active,
.fade-slide-leave-active {
  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

.fade-slide-enter,
.fade-slide-leave-to {
  transform: translateY(-100%);
  opacity: 0;
}

/* 进入后状态，正常显示 */
.fade-slide-enter-to,
.fade-slide-leave {
  transform: translateY(0);
  opacity: 1;
}

/* 动画循环时的控制 */
.fade-slide-leave {
  transform: translateY(100%);
  opacity: 0;
}
</style>